<template>
  <el-dialog :title="title" v-model="visible" width="800px" append-to-body>
    <recipe-form
      ref="formRef"
      :form="form"
      :rules="rules"
      :category-options="categoryOptions"
      :status-options="statusOptions"
      @submit="handleSubmit"
      @cancel="handleCancel"
    />
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import RecipeForm from './RecipeForm.vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  form: {
    type: Object,
    default: () => ({})
  },
  categoryOptions: {
    type: Array,
    default: () => []
  },
  statusOptions: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'success'])

const visible = ref(false)
const formRef = ref()

// 表单校验规则
const rules = {
  recipeName: [{ required: true, message: '宠物名称不能为空', trigger: 'blur' }],
  categoryId: [{ required: true, message: '分类不能为空', trigger: 'change' }],
  age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不能为空', trigger: 'change' }]
}

const handleSubmit = formData => {
  emit('success', formData)
  visible.value = false
}

const handleCancel = () => {
  visible.value = false
}

// 对外暴露方法
defineExpose({
  visible
})
</script>
